$(function () {

  var pageSize = 5; //每页条数
  var currentPage = 1;  //记录当前页面 

  // 1- 渲染用户首页数据 
  // 数据 + 模板 
  // 1- 去后台获取用户第一屏的数据
  // 2- 配合模板引擎进行渲染 
  // 3- 把渲染的结果添加到页面 

  function render () {
    $.ajax({
      type: 'get',
      url: '/user/queryUser',
      data: {
        pageSize: pageSize,
        page: currentPage
      },
      dataType: 'json',
      success: function (res) {
        console.log(res);
        // 渲染
        $('tbody').html(template('tmp', res));
        // res.total 服务器数据的总数 
        // 根据后台返回的真实的数据库总数生成分页
        setPage(res.total);
      }
    })
  }

  render();

  // 2-禁用启用 
  // 1- 点击禁用/启用按钮， 弹出模态框， 获取当前数据id， 获取要进行操作 
  // 2- 当点击确定操作按钮时，请求后台， 并且更新状态
  // 3- 更新数据成功后，页面重新渲染， 隐藏模态框 
  var id = null; // id
  var isDelete = null; // 存放要进行操作  
  $("tbody").on('click', '.my-btn', function () {
    // 获取当前数据id
    // id = $(this).parent().attr('data-id');
    id = $(this).parent().data('id');
    // 获取要进行操作 
    isDelete = $(this).hasClass('btn-danger') ? 0 : 1;
    console.log(id, isDelete);
  });

  // 2- 当点击确定操作按钮时，请求后台， 并且更新状态
  // 3- 更新数据成功后，页面重新渲染， 隐藏模态框 
  $('.btn-ok').click(function () {
    $.ajax({
      type: 'post',
      url: '/user/updateUser',
      data: {
        id: id,
        isDelete: isDelete
      },
      dataType: 'json',
      success: function (res) {
        console.log(res);
        // 重新渲染
        render();
        // 隐藏模态框
        $('.modal-user').modal('hide');
      }
    })
  })


  // 3- 分页功能 
  // 页码的个数是变化的，取决于数据库数据的总数 
  // total 表示数据库数据的总数 
  function setPage (total) {
    // 根据数据库数据的总数 ， 生成分页标签
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
      currentPage: currentPage,//当前页  高亮效果加给谁
      totalPages: Math.ceil(total / pageSize),//总页数
      onPageClicked: function (event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮值,就是当前页面 
        console.log(page);
        // 改变当前页取值 
        currentPage = page;
        // 重新渲染
        render();
      }
    });
  }

});


// var total = '';

// function test () {
//   //ajax 是异步 
//   total = 'bb';
// }

// test(); 


// function test2 ( a ) {

// }

// test2(total);